<template>

        <el-form ref="ArticleForm" :model="article" :rules="rules">
            <el-form-item label="商品流水号" v-if="mode>0">
                <span>{{article.articleCode}}</span></el-form-item>

            <el-form-item label="商家流水号" v-if="mode===0" prop="seller.sellerCode">
                <el-input v-model.trim="article.seller.sellerCode"></el-input>
            </el-form-item>

            <el-form-item label="商品类型" prop="articleType" v-if="mode>=0">
                <el-radio-group v-model="article.articleType">
                    <el-radio v-for="i in articleTypes" :key="i.value"
                            :label="i.value">{{i.text}}</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="商品类型" v-if="mode>1">
                <span>{{article.articleType}}</span>
            </el-form-item>

            <el-form-item label="余额" prop="price" v-if="mode>=0">
                <el-input type="number" step="0.01"
                          v-model.number="article.price"></el-input>
            </el-form-item>
            <el-form-item label="余额"  v-if="mode>1">
                <span>{{article.price}}</span>
            </el-form-item>

            <el-form-item label="商家昵称" v-if="mode>=0" >
                <span>{{article.seller.member.nickName}}</span>
            </el-form-item>


            <el-form-item label="调试信息" v-if="mode===-1">
                <span>{{article.id+'--'+article.articleCode+'--'+article.seller.sellerCode}}
                </span>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="reset" v-if="mode===0">重置</el-button>
            </el-form-item>
        </el-form>


</template>

<script>
    import {mapState} from 'vuex'
    export default {
        props:{

            mode:{
                type: Number,
                default:0
            },
            hide:{
                type: Function,
            },
        },
        data: function () {
            return {
                article: {
                    id: null,
                    articleCode: null,
                    articleType: null,
                    price: null,
                    seller: {
                        sellerCode: '',
                        createDate: null,
                        id: null,
                        member: {
                            balance: null,
                            nickName: ''
                        }
                    }
                },
                rules: {
                    price: [
                        {required: true, message: '请输入剩余金额', trigger: 'blur'},
                        {type: 'number', message: '金额必须为数字值'}
                    ],
                    articleType: [
                        {required: true, message: '请输入昵称', trigger: 'change'},
                    ],
                }

            }
        },
        computed: {
            ...mapState([
                'articleTypes'
            ])
        },
        methods: {
            save:function (url,method) {
                let valid =this.$refs['ArticleForm'].validate();
                if (!valid){
                    this.$message.warning('数据格式错误');
                    return 0;
                }

                return this.$http({
                    url:url,
                    method:method,
                    data:this.article,
                }).then((res)=>{
                    //this.$emit('submitted',this.article);
                    this.article=res.data;
                    return this.article;
                });
            },
            reset: function () {
                this.$refs['ArticleForm'].resetFields();
            },
            modifyInit: function (code) {
                let url = 'http://localhost:8899/article/'+code;

                return this.$http({
                    method:'get',
                    url:url,
                }).then(res=>{
                    this.article=res.data;
                    this.$message.warning(JSON.stringify(this.article));
                    //注意 即使有网络延迟 ,当数据回来时候 整体article变化了也将会被渲染到页面上
                });
            },
            insertInit:function (code) {
                this.reset();
                let url ='http://localhost:8899/seller/'+code;
                return this.$http({
                    method:'get',
                    url:url,
                }).then(res=>{
                    this.article.seller=res.data;
                    this.$message.warning(JSON.stringify(this.article));
                    return this.article.seller;
                })
            }
        },

        mounted: function () {

        },

        created: function () {

        },
        name: "ArticleDesc"
    }
</script>

<style scoped>

</style>
